<template>
	<view class="passwordinput">
		<view class="passwordinput-code">
			<block v-for="(item,index) in maxlen" :key="index">
				<view class="passwordinput-code-item">
					<block v-if="inputValue[index]">
						<text></text>
					</block>
					<block v-if="active==index&&isFocus">
						<view class="active">|</view>
					</block>
				</view>
			</block>
			<input
			:focus="isFocus"
			:maxlength="maxlen" 
			type="number"
			@focus="focus"
			@blur="blur"
			@input="inputVal"
			class="input_info"/>
		</view>
		
	</view>
</template>

<script>
	import {mixin} from '@/Mixins/mixin.js'
	export default {
		props:{
			value:'',
			maxlen:{
				type:Number,
				default:6
			}
		},
		mixins:[mixin],
		data() {
			return {
				active:0,
				isFocus:true
			};
		},
		computed:{
			inputValue(){
				// let arr = []
				// for (let i = 0; i < this.value.length; i++) {
				// 	arr.push(this.value.substr(i,1))
				// }
				// this.active = arr.length
				// return arr
				let arr = [...this.value]
				this.active = arr.length
				return arr
			}
		},
		methods:{
			focus(e){
				this.isFocus = true
			},
			blur(){
				console.log('[失去焦点]')
				this.isFocus = false
			},
			inputVal(e){
				let value = e.detail.value
				this.$emit('input',value)
				if(value.length==this.maxlen){
					this.$emit('confirm',value)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.passwordinput{
		display: flex;
		justify-content: center;
		&-code{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			font-size: 0;
			position: relative;
			border-radius: 8rpx;
			&-item{
				// margin: 0 9rpx;
				width: 90rpx;
				height: 94rpx;
				// background: #D8D8D8;
				// border-radius: 16rpx;
				line-height: 94rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				border: 1rpx solid #979797;
				border-left: none;
				&:nth-child(1) {
					border-left: 1rpx solid #979797;
				}
				text{
					display: inline-block;
					width: 18rpx;
					height: 18rpx;
					border-radius: 50%;
					background: #000000;
				}
				.active{
					animation:inputS 0.8s infinite;
				}
			}
		}
		input{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			line-height: 94rpx;
			height: 94rpx;
			opacity: 0;
		}
		@keyframes inputS
		    {
		    from {
				opacity: 1;
			}
		    to {
				opacity: 0;
			}
		}
	}
</style>